<template>
	<div id="log_body">
		<div id="login">
			<login-top></login-top>
			<div class="login_content">
				<div class="left_img">
					<img src="../../assets/login/pic_login.png" />
				</div>
				<div class="loginarea">
					<div class="login_type my-flex-center">
						<label class="label my-flex-center" :class="{'active':currentIndex==index}" v-for="(item,index) in registType" @click="changeType(item.id,index)">
						<input type="radio" name="type" v-model="currentType" :value="item.id" />
						<div class="img"></div><span>{{item.value}}</span>							
					</label>
					</div>
					<form action="" class="my-flex-col-around">
						<div class="top_input ">
							<div class="input_box">
								<div class="input_title">
									手机号
								</div>
								<div class="input">
									<el-input readonly onfocus="this.removeAttribute('readonly');" onblur="this.setAttribute('readonly',true);" @blur="companySelect" v-model="loginForm.tel" placeholder="输入手机号码"></el-input>
								</div>
							</div>
							<div class="input_box" v-if="currentIndex==1">
								<div class="input_title">
									公司
								</div>
								<div class="input">
									<el-select v-model="loginForm.realName" placeholder="选择公司" @focus="changeCompay()">
										<el-option v-for="item in companyList" :key="item.realName" :label="item.realName" :value="item.realName">
										</el-option>
									</el-select>
								</div>
							</div>
							<div class="input_box last_input_box">
								<div class="input_title">
									密码
								</div>
								<div class="input">
									<el-input readonly onfocus="this.removeAttribute('readonly');" onblur="this.setAttribute('readonly',true);" v-model="loginForm.pwd" type="password" placeholder="输入密码" @keyup.enter.native="login()"></el-input>
								</div>

							</div>
						</div>

						<div class="btnarea">
							<div class="loginbtn my-btn" @click="login">登录</div>
							<div class="otherbtn my-flex-between">
								<span @click="changeRouter('/forgetpwd')">忘记密码</span>
								<span @click="changeRouter('/regist')">注册</span>
							</div>
						</div>
					</form>
				</div>
			</div>

		</div>
	</div>
</template>

<script>
	import loginTop  from '@/components/loginTop/index.vue';
	import service from '@/js/common/customerservice.js';
	export default {
		components:{loginTop},
		data() {
			return {
				registType: [{
					id: 'personRegister',
					value: '个人货主登录'
				}, {
					id: 'customer',
					value: '企业货主登录'
				}],
				loginForm: {
					tel: '',
					realName: '',
					pwd: null,
					bos: true
				},
				hasreturn: false,
				from: null,
				formVisible: false,
				companyList: [],
				currentIndex: 0,
				currentType: 'personRegister',
				options: [{
					value: '选项1',
					label: '黄金糕'
				}, {
					value: '选项2',
					label: '双皮奶'
				}, {
					value: '选项3',
					label: '蚵仔煎'
				}, {
					value: '选项4',
					label: '龙须面'
				}, {
					value: '选项5',
					label: '北京烤鸭'
				}],
				value: ''
			}
		},
		mounted() {

		},
		beforeRouteEnter(to, from, next) {
			next((vm) => {
				vm.from = from.fullPath;
			})
		},
		methods: {
			...service,
			changeType(id, index) {
				this.currentType = id;
				this.currentIndex = index;
				if(index==1 && this.loginForm.tel!=''){
					this.getCompanyName();
				}
			},
			login() {
				this.lognin();
			},
			changeRouter(url) {
				this.$router.push(url);
			},
			changeCompay(val) {
				var self=this;
				var telReg = /^[1][3,4,5,7,8][0-9]{9}$/;
				if(!self.loginForm.tel){
					this.$message.error('请先输入手机号！');
					return false;
				}else if(!telReg.test(self.loginForm.tel)) {
					this.$message.error('手机号格式不正确！');
					return false;
				}
			},
			companySelect() {
				var self = this;
				if(self.loginForm.tel.length == 11 && this.currentType == 'customer') {
					var telReg = /^[1][3,4,5,7,8][0-9]{9}$/;
					if(!telReg.test(self.loginForm.tel)) {
						this.$message.error('手机号格式不正确！');
						return false;
					}
					this.hasreturn = false;
					this.getCompanyName();
				}
			},

		}
	}
</script>

<style src="../../less/page/common/login.less" lang="less"></style>